<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer.html">

<body>
  
  <dom-module is="data-source">
    <template>
      <span>{{prop}}</span>
      <span>{{data.length}}</span>: length
      <br>
      
      <template is="dom-repeat" items="{{data}}">
        <span>{{item}}</span>
      </template>:items
    </template>
  </dom-module>
  
  
  <script>
      Polymer({
        is: 'data-source',
        
        properties: {
          data: {
            //readOnly: true,
            notify: true,
            type: Array,
            value: [1, 2, 3]
          },
          
          prop: {
            readOnly: true,
            notify: true,
            type: String,
            value: 'foo'
          }
        }
      });
  </script>  
  
  
  <template is="dom-bind">
    
    <h1>Element</h1>
    <data-source data="{{data}}" prop="{{prop}}"></data-source>
    
    <h1>Databound</h1>
    
    <span>{{prop}}</span>

    <template is="dom-repeat" items="{{data}}">
      <span>{{item}}</span>
    </template>
    
  </template>
  

  
</body>
